<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="1300px"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
        <!-- -----------------------------------------------------基本信息-------------------------------------------------------------- -->
        <el-divider>基本信息</el-divider>
        <div class="dialog_left">
          <el-descriptions direction="vertical" :column="8" border>
            <el-descriptions-item label="采购标题" >{{ruleForm.title  || '-'}}</el-descriptions-item>
            <el-descriptions-item label="申请时间" >{{ruleForm.applicationTime  || '-'}}</el-descriptions-item>
            <el-descriptions-item label="申请人" >{{ruleForm.applicantName  || '-'}}</el-descriptions-item>
            <el-descriptions-item label="采购类型" >{{ ['设备采购','物料采购'][ruleForm.type] }}</el-descriptions-item>
            <el-descriptions-item label="期望供货日期">{{ruleForm.desiredDeliveryTime  || '-'}}</el-descriptions-item>
            <el-descriptions-item label="购置理由">{{ruleForm.reason || '-'}} </el-descriptions-item>
            <el-descriptions-item label="备注">{{ruleForm.remark  || '-'}}</el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- ---------------------------------------------------物料采购表格----------------------------------------------------------- -->
        <el-divider>产品信息</el-divider>
        <div class="dialog_table">
          <el-table
            :data="ruleForm.purchaseConsumableVos"
            style="width: 100%">
            <el-table-column
              label="序号"
              width="100">
              <template slot-scope="scope">
                <div> {{scope.$index + 1}} </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="purchaseConsumableBaseVo.materialNum"
              label="编号"
            />
            <el-table-column
              prop="purchaseConsumableBaseVo.materialName"
              label="名称"
            />
            <el-table-column
              prop="purchaseConsumableBaseVo.typeName"
              label="类别"
            />
            <el-table-column
              prop="purchaseConsumableBaseVo.model"
              label="规格型号"
            />
            <el-table-column
              prop="purchaseConsumableBaseVo.unitName" 
              label="单位"
            />
            <el-table-column
              prop="price" 
              label="单价（元）"
            />
            <el-table-column
              prop="amount" 
              label="采购数量"
            />
            <el-table-column
              prop="purchaseConsumableBaseVo.amount" 
              label="库存数量"
            />
            <el-table-column
              label="合计（元）"
            >
              <template slot-scope="scope">
                <div> {{ totalPrice(scope.row.price,scope.row.amount)}} </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- ---------------------------------------------------设备采购表格----------------------------------------------------------- -->
        <!-- <div v-if="ruleForm.type == 0" class="dialog_table">
          <el-table
            :data="ruleForm.purchaseEquipmentVos"
            style="width: 100%">
            <el-table-column
              label="序号"
              width="100">
              <template slot-scope="scope">
                <div> {{scope.$index + 1}} </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="purchaseEquipmentBaseVo.equipmentName"
              label="设备名称"
            />
            <el-table-column
              prop="purchaseEquipmentBaseVo.typeName"
              label="类别"
            />
            <el-table-column
              prop="purchaseEquipmentBaseVo.brand"
              label="品牌"
            />
            <el-table-column
              prop="purchaseEquipmentBaseVo.unitName" 
              label="单位"
            />
            <el-table-column
              prop="price" 
              label="采购单价"
            />
            <el-table-column
              prop="purchaseEquipmentBaseVo.model" 
              label="规格型号"
            />
            <el-table-column
              prop="acceptanceFlag"
              label="验收状态">
              <template slot-scope="scope">
                <div> {{ ['已验收','未验收'][scope.row.acceptanceFlag] }} </div>
              </template>
            </el-table-column>   
          </el-table>
        </div> -->
        <!-- --------------------------------------审核信息---------------------------------------------- -->
    <el-divider>审核信息</el-divider>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" class="rule-form">
      <el-form-item class="form" label="审核意见">
        <el-input
        type="textarea"
        v-model="form.view" 
        placeholder="请输入审核意见" 
        maxlength="30"
        show-word-limit 
        />
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <div class="dialog-footer-btn">
        <el-button type="primary" @click="handleConfirm(2)">通过</el-button>
        <el-button type="danger" @click="handleConfirm(3)">驳回</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { statusSort , listDetail } from '@/api/purchasing/purchasing'
export default {
  name: 'Form',
  data() {
    return {
      dialogVisible: false,
      ruleForm: {},
      isUpdateForm: false,
      dialogTitle: '审核',
      form:{
        auditId: null, //审核信息ID
        applicationId: null, //采购ID
        status: null, //状态（2已通过 3已驳回）
        view: "" //审核意见
      },
      /** 表单规则 --------------------------------------------------------------------------------------------------------------------- */
      rules: {
        typeName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      }
      /** ----------------------------------------------------------------------------------------------------------------------------- */
    }
  },
  computed: {
  },
  methods: {
    // 打开表单对话框
    openDialog(ids = null) {
      if (ids) {
        this.form.auditId = ids.auditId
        this.form.applicationId = ids.purchaseId
        listDetail(ids.purchaseId).then(({data}) => {
          /** 修改时的表单参数赋值 --------------------------------------------------------------------------------------------------------------------- */
          this.ruleForm = data
          this.dialogVisible = true
        })
      }
    },
    // 通过---- 驳回   ==>事件
    submitForm(type) {
      this.form.status = type
      statusSort(this.form).then(() => {
        this.$message({
          message: type==2?'审核已通过':'审核已驳回',
          type: type==2?'success':'error'
        })
        this.handleClose()
        this.$emit('submit_success')
      })
    },
    /** ---------------------------------------------------------------------------------------------------------------------------------------- */
    // 关闭窗口，重置表单-------------------
    handleClose() {
      this.form.view = ''
      this.dialogVisible = false
    },
    // 提交按钮----------------------------
    handleConfirm(type) {
      this.submitForm(type)
    },
    totalPrice(price,num){
      return price * num
    }
  }
}
</script>
<style lang="scss" scoped>
  .form {
    width: 70%;
    margin:0 auto;
  }
  /* 基本信息文字居中 */
  ::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
    text-align: center;
  }
  .dialog-footer{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    .dialog-footer-btn{
      width: 28%;
      display:flex ;
      justify-content: space-around;
      .el-button {
        padding: 12px 45px;
      }
    }
  }
</style>
